<template>
  <div class="question-list-query-builder">
    <div>
      <mu-radio v-model="args.all" :value="0" label="只看我的"></mu-radio>
      <mu-radio v-model="args.all" :value="1" label="查看全部"></mu-radio>
    </div>
    <div>
      <mu-switch v-model="options.id" label="筛选id"></mu-switch>
      <mu-text-field v-if="options.id" v-model="args.id" style="margin:10px"></mu-text-field>
    </div>
    <div>
      <mu-switch v-model="options.keyword" label="关键字"></mu-switch>
      <mu-text-field v-if="options.keyword" v-model="args.keyword" style="margin:10px"></mu-text-field>
    </div>
  </div>
</template>

<script>
export default {
  name: 'QuestionListQueryBuilder',
  data() {
    return {
      args: {
        all: 0,
        id: 0,
        keyword: ''
      },
      options: {
        id: false,
        keyword: false
      }
    }
  },
  computed: {
    parsedQuery() {
      const query = {}
      query.all = this.args.all
      if (this.options.id) {
        query.id = this.args.id
      }
      if (this.options.keyword) {
        query.keyword = this.args.keyword
      }
      return query
    }
  },
  watch: {
    parsedQuery(val) {
      this.$emit('input', val)
    }
  }
}
</script>
